<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query
              :searchParam="searchParam.params"
              :labelCol="{ span: 10 }"
              :wrapperCol="{ span: 14 }"
              @on-search="search"
              @on-reset="reset"
            />
          </div>
          <!-- 列表 -->
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :operate="operate"
            :param="state.param"
            :toolbar="toolbar"
            :pagination="pagination"
            :operationWidth="180"
          />
        </a-card>
      </a-col>
    </a-row>
    <a-modal
      :visible="state.modalVisible"
      v-if="state.modalVisible"
      :title="t('button.generateQrCode')"
      :cancelText="t('button.cancel')"
      :okText="t('button.determine')"
      @ok="handleOk"
      @cancel="cancel">
      <div class="qrcode">
        <qrcode-vue :value="state.qrCodeUrl" :size="100" level="H" />
      </div>
    </a-modal>
  </page-layout>
</template>
<script>
export default {
  name: "activity-management"
}
</script>
<script setup>
import { reactive, onMounted, ref, createVNode, onActivated } from "vue";
import { useRouter } from 'vue-router'
import { filterEmptyByObject } from "@/tools/common";
import { getDictByCodesReturnObj } from "@/tools/get-dict";
import dictEnum from "@/const/dict";
import {
  page,
} from '@/api/module/activity-management'
import moment from "moment";
import QrcodeVue from 'qrcode.vue'
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const router = useRouter();
const tableRef = ref()
const pagination = {
  pageNum: 1,
  pageSize: 10,
};
const handleAdd = () => {
  router.push("/market/activity-management/add");
};

const fetch = async (param) => {
  const response = await page(param);
  return {
    data: response.data.record,
    total: Number(response.data.total)
  };
};
const toolbar = [
  {
    code: "activity-management:add",
    label: t('activityManage.label.newActivities'),
    type: "primary",
    event: (selectedRowKeys) => {
      handleAdd();
    },
  },
];
const columns = [
  { dataIndex: "actName", key: "actName", title: t('activityManage.label.activityName'), width: 130, },
  { dataIndex: "bgeinTime", key: "bgeinTime", cellRender: (record, data) => {
      const time = data ? moment(data).format("YYYY-MM-DD HH:mm:ss") : "";
      return time;
    }, title: t('activityManage.label.ativityStartTime'), width: 160, },
  { dataIndex: "endTime", key: "endTime", cellRender: (record, data) => {
      const time = data ? moment(data).format("YYYY-MM-DD HH:mm:ss") : "";
      return time;
    }, title: t('activityManage.label.activityEndTime'), width: 160, },
  { dataIndex: "actStatus", key: "actStatus", cellRender: (record, data) => {
      const item = dictLists.data[dictEnum.ACT_STATUS]
        ? dictLists.data[dictEnum.ACT_STATUS].find((v) => v.value == data)
        : {};
      return item ? item.label : "";
    }, title: t('activityManage.label.state') },
  { dataIndex: "actType", key: "actType", cellRender: (record, data) => {
      const item = dictLists.data[dictEnum.ACT_TYPE]
        ? dictLists.data[dictEnum.ACT_TYPE].find((v) => v.value == data)
        : {};
      return item ? item.label : "";
    }, title: t('activityManage.label.activityType') },
  { dataIndex: "actHead", key: "actHead", title: t('activityManage.label.personInCharge') },
  { dataIndex: "createTime", key: "createTime", title: t('activityManage.label.creationTime') },
];

const operate = [{ code: 'activity-management:remove', label: t('button.detail'), event: (record) => { handleCheck(record) } }];
const handleCheck = (row) => {
  router.push({
    path: "/market/activity-management/detail",
    query: { id: row.id || ''}
  });
}
const handleCode = (row) => {
  state.modalVisible = true
}
const handleOk = () => {
  console.log('cancel: ');
  cancel()
}
const cancel = () => {
  state.modalVisible = false
}
const search = (value) => {
  state.param = {
    ...state.param,
    ...filterEmptyByObject(value),
    bgeinTime: value.createTime ? moment(value.createTime[0]).valueOf() : undefined,
    endTime: value.createTime ? moment(value.createTime[1]).valueOf() : undefined,
  };
};
const reset = (value) => {
  state.param = {};
};

let searchParam = reactive({
  params: []
});
let dictLists = reactive({
  data: {},
});

const state = reactive({
  selectedRowKeys: [],
  param: {},
  modalVisible: false,
  qrCodeUrl: 'https://www.baidu.com'
});

onMounted( async () => {
  dictLists.data = await getDictByCodesReturnObj([
    dictEnum.ACT_TYPE,
    dictEnum.ACT_STATUS,
  ])
  searchParam.params = [
    {
      key: "actType",
      type: "select",
      label: t('activityManage.label.activityType'),
      placeholder: t('placeholder.all'),
      options: dictLists.data[dictEnum.ACT_TYPE],
    },
    { key: "actName", type: "input", label: t('activityManage.label.activityName'), placeholder: t('placeholder.pleaseEnter') },
    // {
    //   dataIndex: "createTime",
    //   key: "createTime",
    //   type: "rangeTime",
    //   label: t('activityManage.label.creationTime'),
    // },
    {
      key: "actStatus",
      type: "select",
      label: t('activityManage.label.state'),
      placeholder: t('placeholder.all'),
      options: dictLists.data[dictEnum.ACT_STATUS],
      hidden: true,
    },
    {
      key: "user",
      type: "input",
      label: t('activityManage.label.personInCharge'),
      hidden: true,
      placeholder: t('placeholder.pleaseEnter'),
    },
  ]
})
</script>

<style lang="scss" scoped>
.qrcode {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
